<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!--
        概述：钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法
        vue生命周期总共分为8个阶段：
            创建前（beforeCreate）/后(create), 载入前(beforeMount)/后(Mounted),更新前(beforeUpdate)/后(updated),销毁前(beforeDestroy)/后(destroyed)。
    -->
</head>
<body>
<div id="app">
    <!--
        v-text：把数据当作纯文本显示.
        v-html：遇到html标签,会正常解析
    -->
    v-text：<span v-text="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->
    v-html：<span v-html="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        //定义vue中的数据
        data: {
            msg: "测试"
        },
        //钩子函数created,该方法在页面显示之后,自动执行
        created() {
            console.log("created...");
        }
    });
</script>

</html>